<template>
  <div class="indent">
    <el-form ref="dataForm" class="oldIndent_nav">
      <div style="margin-bottom:20px;">
        <span style="margin-left:60px">订单号：</span>
        <el-input
          v-model="order_no"
          placeholder="请输入订单号"
          class="input-with-select"
          style="width:300px"
        />
        <span style="margin-left:60px">收件人姓名：</span>
        <el-input v-model="consignee_name" placeholder="请输入收件人姓名" style="width:200px" />
        <span style="margin-left:60px">收件人电话号码：</span>
        <el-input
          v-model="consignee_phone_no"
          placeholder="请输入收件人电话"
          style="width:200px"
          @blur="phoneCard"
        />
        <el-button type="primary" round style="float:right;margin-right:50px;" @click="Search">查询</el-button>
      </div>
    </el-form>

    <el-table :data="goodList" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="序列号" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span size="medium">{{ scope.row.order_id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="200" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.order_no }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="购买商品" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <li v-for="(value,index) in scope.row.details">
              <span>{{ value.goods_name }}</span> X
              <span>{{ value.pay_number }} 个</span>
              <br>
            </li>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.order_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单优惠" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.order_discount_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.order_pay_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="160" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.add_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="160" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.state }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="120" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="look(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="temp.current_page"
        :page-count="temp.pageNum"
        :page-size="temp.page_size"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'

export default {
  data() {
    return {
      dataForm: '',
      time2: new Date(),
      temp: {
        end_day: '100000000',
        start_day: '',
        consignee_name: '',
        consignee_phone_no: '',
        order_no: '',
        current_page: 1, // 初始页
        page_size: 10, // 当前页面内的列表行数
        pageNum: 1, // 总数页数
        community_id: 0
      },
      goodList: [],
      total: 0,
      data: {},
      total: 0,
      order_no: '', // 订单号
      consignee_name: '', // 收件人姓名
      consignee_phone_no: '' // 收件人电话
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    // 精准查询
    Search() {
      this.temp.consignee_name = this.consignee_name
      this.temp.order_no = this.order_no
      this.temp.consignee_phone_no = this.consignee_phone_no
      this.getAll()
    },

    // 获取所有
    getAll() {
      var d = new Date(this.time2)
      this.temp.start_day =
        d.getFullYear() + '' + (d.getMonth() + 1) + '' + d.getDate()
      if (this.consignee_name === '') {
        this.temp.consignee_name = '100000000'
      }
      if (this.consignee_phone_no === '') {
        this.temp.consignee_phone_no = '100000000'
      }
      if (this.order_no === '') {
        this.temp.order_no = '100000000'
      }
      return request({
        url: '/v3/admin/order/list',

        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        res.list.map((value, index) => {
          if (value.state == 1) {
            value.state = '待支付'
          } else if (value.state == 2) {
            value.state = '待发货'
          } else if (value.state == 3) {
            value.state = '已发货'
          } else if (value.state == 4) {
            value.state = '已完成'
          } else if (value.state == 5) {
            value.state = '已关闭订单'
          } else if (value.state == 6) {
            value.state = '拼团订单已支付等待拼团完成'
          } else if (value.state == 7) {
            value.state = '退款中'
          } else if (value.state == 8) {
            value.state = '已退款'
          }
          value.order_amount = value.order_amount / 100
          value.order_discount_amount = value.order_discount_amount / 100
          value.order_pay_amount = value.order_pay_amount / 100
        })
        this.temp.pageNum = res.pageNum
        this.total = res.total_record
        this.goodList = res.list
      })
    },
    // 手机号正则
    phoneCard() {
      var pattern = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
      var str = this.temp.consignee_phone_no
      if (pattern.test(str) !== true) {
        Message({
          message: '手机号格式不正确',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    // 查看详情
    look(row) {
      this.$router.push({
        path: '/indents/oldIndent/oldIndentDefault',
        query: {
          id: row.order_no
        }
      })
    },
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getAll()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getAll()
    }
  }
}
</script>
<style lang="scss" scoped>
.indent {
  margin-top: 60px;
  overflow: hidden;
  .oldIndent_nav {
    height: 80px;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 20px;
  }
}
</style>
